import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

import Navbar from './components/Navbar';
import Login from './components/Login';
import Register from './components/Register';
import TodoApp from './components/TodoApp';
import ProtectedRoute from './components/ProtectedRoute';
import AdminDashboard from './components/AdminDashboard';
import AdminRoute from './components/AdminRoute';
import AuthService from './services/AuthService';
import IncompleteTodosPage from './components/IncompleteTodosPage'; // 引入新组件

// 创建一个判断用户是否已登录的组件
const HomeRedirect = () => {
    const isAuthenticated = AuthService.isAuthenticated();
    console.log('首页重定向检查 - 用户是否已认证:', isAuthenticated);

    // 如果已登录，根据角色重定向到相应页面
    if (isAuthenticated) {
        const user = AuthService.getCurrentUser();
        console.log('首页重定向 - 当前用户信息:', user);

        // 检查是否是管理员
        const isAdmin = AuthService.isAdmin();
        console.log('首页重定向 - 是否为管理员:', isAdmin);

        if (isAdmin) {
            console.log('首页重定向 - 用户是管理员，重定向到管理界面');
            return <Navigate to="/admin" replace />;
        } else {
            console.log('首页重定向 - 用户是普通用户，重定向到待办事项');
            return <Navigate to="/todos" replace />;
        }
    }

    // 如果未登录，重定向到登录页面
    return <Navigate to="/login" replace />;
};

function App() {
    return (
        <Router>
            {/* 主布局：导航栏 + 内容区 左右结构 */}
            <div className="d-flex">
                {/* 左侧导航栏，固定宽度 */}
                <Navbar className="w-25 bg-success bg-opacity-25 border-end" />

                {/* 右侧内容区，自动填充剩余空间 */}
                <div className="flex-grow-1 p-4">
                    <Routes>
                        <Route path="/login" element={<Login />} />
                        <Route path="/register" element={<Register />} />
                        <Route
                            path="/todos"
                            element={
                                <ProtectedRoute>
                                    <TodoApp />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/incomplete-todos"
                            element={
                                <ProtectedRoute>
                                    <IncompleteTodosPage />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/admin"
                            element={
                                <AdminRoute>
                                    <AdminDashboard />
                                </AdminRoute>
                            }
                        />
                        <Route path="/" element={<HomeRedirect />} />
                        <Route path="*" element={<Navigate to="/login" replace />} />
                    </Routes>
                </div>
            </div>
        </Router>
    );
}

export default App;